/* 
  学习目标：性能优化-使用PurComponent
  1. 浅比较
  2. 👍推荐创建新数据，再操作
  3. 避免修改原数据
*/
import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'hello React',
    obj: { msg: '12312' },
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleMsg = () => {
    // ❌不要直接修改state对象
    // this.state.msg = 'Hello Vue';
    // this.setState(this.state);
    // this.state.obj.msg = 'Hello 修改对象了';
    // this.setState(this.state);

    // 注意：PureComponent是浅层比较，只会比较引用类型的引用地址，不会监听的属性是否真的改变了
    // 1. 在引用类型时，要避免修改原数据。比如：数组的push  splice，直接修改对象的属性
    // 2. 在基本值时，也要保持避免修改原数据的习惯。

    // 👍推荐，复制一份数据再操作
    this.setState({
      obj: {
        ...this.state.obj,
        msg: Math.random() + '',
      },
    });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <button onClick={this.handleMsg}>点我修改msg</button>
        <Footer msg={this.state.msg} obj={this.state.obj}></Footer>
      </div>
    );
  }
}

class Footer extends React.PureComponent {
  render() {
    // 学习目标：
    // 1. JS值比较简单类型
    const num1 = '123';
    const num2 = '456';
    console.log('值比较', num1 === num2); //false

    const obj = { msg: '123' };
    const obj2 = obj;
    console.log('复杂比较', obj === obj2);

    console.log('Footer被刷新了');
    return (
      <div>
        <div>{this.props.msg}</div>
        <h1>{this.props.obj.msg}</h1>
      </div>
    );
  }
}

// class Footer2 extends React.Component {
//   render() {
//     return <div>test</div>;
//   }
// }
